<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="./echarts.js"></script>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'c5b3373591dcf4cc8c26437d2e1e0865',
        }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=9459c43cfd26752214a04ca5de3c7db5"></script> 
</head>
<style>
    #container {
        width:700px; 
        height: 500px; 
        margin: auto;
        } 
</style>

</head>
<style>
*{
    margin: 0;
    padding: 0;
}
.div1,.div2{
float: left;
}
.div1{
    width: 500px;
    height: 280px;
    background-color: #fff;
}
.div1-one{
    margin-left: 20px;
}
.div1-one img{
width: 150px;
border-radius: 50%;
float: left;
}
.div1-one span{
    float: left;
    margin-top: 40px;
}
.clear{
    clear: both;
}
.span-one{
font-size: 14px;
color: rgb(187, 184, 184);
margin-top: 20px;
}
.span-two{
font-size: 14px;
color: rgb(187, 184, 184);
}
.div1-two{
    width: 500px;
    height: 280px;
    background-color: rgb(255, 255, 255);
    margin-top: 90px;
}
.div1-two span{
    margin-left: 30px;
}
.div1-two p{
padding-top:15px;
padding-bottom: 15px;
}
.div21{
float: left;

}
.div22{
    float: left;
}

.div23{
    float: left;
}
.div21 p{
    width: 100px;
    height: 100px;
    background: rgb(67, 227, 255);
    float: left;
    margin-left: 25px;

}
.div21 span{
    width: 210px;
    height: 100px;
    background: #fff;
    float: left;
}
.div22 p{
    width: 100px;
    height: 100px;
    background: rgb(104, 229, 138);
    float: left;
    margin-left: 25px;
}
.div22 span{
    width: 210px;
    height: 100px;
    background: #fff;
    float: left;
}
.div23 p{
    width: 100px;
    height: 100px;
    background: rgb(233, 107, 107);
    float: left;
    margin-left: 25px;

}
.div23 span{
    width: 210px;
    height: 100px;
    background: #fff;
    float: left;
}
.div2-two{
    width: 985px;
    height: 460px;
    background: #fff;
    margin-top: 20px;
    margin-left: 20px;
    clear: both;
}
.div2-two p{
    color: rgb(81, 77, 77);
    padding-top: 15px;
    margin-left: 20px;
    line-height: 30px;
    float: left;
}
#btn{
    float: left;
    background-color: #fff;
    border: none;
    margin-top: 20px;
    color: blue;
    margin-left: 850px;
}
.box2-one{
    margin-top: 20px;
    clear: both;
    width: 740px;
    height: 300px;
    background-color: #fff;
    float: left;
}
.box2-two{
    margin-top: 20px;
    width: 740px;
    height: 300px;
    background-color: #fff;
    float: left;
    margin-left: 20px;
}
#container{
    width: 500px;
    height: 300px;
}
#main1{
    width: 500px;
    height: 300px;
    margin: auto;
}
.progress{
    width: 400px;
    margin-bottom: 0px;
    margin-left: 30px;
}
</style>
<body style="background: rgb(222, 217, 217);">
    <div class="box1">
        <div class="div1">
          <div class="div1-one">   
                  <img src="./imgs/9_11.gif" alt="">
                  <span>admin<br>超级管理员</span>
                  <div class="clear"></div>
                  <hr>
                  <p class="span-one">上次登录时间：&nbsp;&nbsp;&nbsp;&nbsp;2022-6-12</p><br>
                  <p class="span-two">上次登陆地点：&nbsp;&nbsp;&nbsp;&nbsp;早上</p>
          </div> 
                  

           <div class="div1-two">
              <p>语言详情</p>
              <hr> 
              <span>Vue</span>
              <div class="progress">
                
                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" id="srone" style="width: 40%">
                  <span class="sr-only">40% Complete (success)</span>
                </div>
              </div>
              <span>Script</span>
              <div class="progress">
                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" id="srtwo"  style="width: 20%">
                  <span class="sr-only">20% Complete</span>
                </div>
              </div>
              <span>CSS</span>
              <div class="progress">
                <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" id="srthree"  style="width: 60%">
                  <span class="sr-only">60% Complete (warning)</span>
                </div>
              </div>
              <span>Html</span>
              <div class="progress">
                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" id="srfour"  style="width: 80%">
                  <span class="sr-only">80% Complete (danger)</span>
                </div>
              </div>
          </div> 
          </div>
          
        <div class="div2">
            <div class="div2-one">
                <div class="div21"><p></p><span><h2 id="shu1" style="color: rgb(78, 174, 237);text-align: center;"></h2><br><b style="color: rgb(164, 165, 166);margin-left:70px;">用户访问量</b></span></div>
                <div class="div22"><p></p><span><h2 id="shu2" style="color: rgb(78, 174, 237);text-align: center;"></h2><br><b style="color: rgb(164, 165, 166);margin-left:75px;">系统消息</b></span></span></div>
                <div class="div23"><p></p><span><h2 id="shu3" style="color: rgb(78, 174, 237);text-align: center;"></h2><br><b style="color: rgb(164, 165, 166);margin-left:95px;">数量</b></span></span></div>
            </div>
            <div class="clear"></div>
            <div class="div2-two">
                <p>待办事项</p><button id="btn">添加</button>
                <div class="clear"></div>
                <hr>
                    <ul id="uls">
                    </ul>
                
            </div>
        </div>
    </div>
</div>
    <div class="box2">
        <div class="box2-one">
            <div id="container"></div> 
        </div>
        <div class="box2-two">
            <div id="main1"></div>
        </div>
    </div>
    <script>
// 获取数量
$.ajax({
            type: 'GET',
            url: 'http://47.94.4.201/index.php/index/admin/getNolist',
            dataType: 'json',
            success: function (e) {
                // $('#srone').css('width',`${e.data.vuenum}%`)
                // $('#srtwo').css('width',`${e.data.jsnum}%`)
                // $('#srthree').css('width',`${e.data.cssnum}%`)
                // $('#srfour').css('width',`${e.data.htmlnum}%`)
                console.log(e);
                $('#shu1').html(`${e.data[0].num}`)
                $('#shu2').html(`${e.data[1].num}`)
                $('#shu3').html(`${e.data[2].num}`)
            }
 })
// 进度条
$.ajax({
            type: 'GET',
            url: 'http://47.94.4.201/index.php/index/admin/getNum',
            dataType: 'json',
            success: function (e) {
                $('#srone').css('width',`${e.data.vuenum}%`)
                $('#srtwo').css('width',`${e.data.jsnum}%`)
                $('#srthree').css('width',`${e.data.cssnum}%`)
                $('#srfour').css('width',`${e.data.htmlnum}%`)
            }
 })

// 获取待办事项
$('#btn').click(function(){
var list = [],
            mapList = []
        var uls = $('#uls').val()
        $.ajax({
            type: 'GET',
            url: 'http://47.94.4.201/index.php/index/admin/getTolist',
            dataType: 'json',
            success: function (e) {
            let strHtml = ''
            for(let i in e.data){
                strHtml +=`<div class='input'><input type='checkbox' class='inputs'><span class='overspan'>${e.data[i]}</span><div><br/>`
            }
            $('#uls').html(strHtml)
                        }

                    })

            })


// 销售趋势
var chartDom = document.getElementById('main1');
var myChart = echarts.init(chartDom);

var option = {
 
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['家电', '百货', '视频']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['6月', '7月', '8月']
  },
  yAxis: {},
  series: [
    {
      name: '家电',
      type: 'line',
      smooth: true,
      
      data: [50, 46, 60]
    },
    {
      name: '百货',
      type: 'line',
      smooth: true,
      
      data: [60, 23, 30]
    },
    {
      name: '视频',
      type: 'line',
      smooth: true,
      
      data: [60, 36.5, 30]
    },
  ]
};

myChart.setOption(option);


// 公司位置显示
 var map = new AMap.Map("container", {
        viewMode: '3D',
        zoom: 15,
        center: [113.428145,34.776671],
        resizeEnable: true
    });

var text = new AMap.Text({
        anchor:'center', 
        draggable:true,
        cursor:'pointer',
        style:{
            'padding': '.75rem 1.25rem',
            'margin-bottom': '1rem',
            'border-radius': '.25rem',
            'background-color': 'white',
            'width': '8rem',
            'border-width': 0,
            'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
            'text-align': 'center',
            'font-size': '20px',
            'color': 'blue'
        },
        position: [113.428145,34.776671]
    });

    var m3 = new AMap.Marker({
      position: [113.428161,34.775989],
      icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png"
    });
    map.add(m3);
    text.setMap(map);

// map.add(trafficLayer);

    </script>
</body>
</html>